package templa

import (
	"strconv"
	"context"
	"io"
	"github.com/go-fuego/fuego/extra/markdown"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/store"
	"github.com/go-fuego/fuego/examples/full-app-gourmet/templa/components"
)

func Unsafe(html string) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
		_, err = io.WriteString(w, html)
		return
	})
}

type GeneralProps struct {
	Title   string
	IsAdmin bool
}

type RecipePageProps struct {
	Recipe         store.Recipe
	Ingredients    []store.GetIngredientsOfRecipeRow
	RelatedRecipes []store.Recipe
}

templ RecipePage(props RecipePageProps, generalProps GeneralProps) {
	@page(props.Recipe.Name) {
		<div class="p-4 md:p-8 flex flex-col items-center md:items-start md:flex-row md:justify-between gap-6">
			<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 mb-4">
				<div id="img">
					<img
						if props.Recipe.ImageUrl != "" {
							src={ props.Recipe.ImageUrl }
						} else {
							src="/static/dinner-placeholder.webp"
						}
						alt="Recipe image"
						class="w-full h-auto object-cover rounded-lg shadow-md"
						width="400"
						height="300"
						style="aspect-ratio: 400 / 300; object-fit: cover;"
					/>
				</div>
				<div id="meta" class="md:col-span-2">
					<div class="flex items-center justify-between">
						<hgroup>
							<span class="inline-flex flex-col gap-2 items-baseline pb-2 md:pb-4">
								<span class="inline-flex gap-4 items-baseline">
									<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 md:mt-0">
										{ props.Recipe.Name }
									</h1>
									<svg class="w-6 h-6 text-gray-300 hover:text-red-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
										<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
									</svg>
								</span>
								@components.Stars(7)
							</span>
							<p id="created-by" class="text-sm text-gray-600 dark:text-gray-400 italic">
								by { props.Recipe.CreatedBy }
								if generalProps.IsAdmin {
									- 
									<a href={ templ.URL("/admin/recipes/" + props.Recipe.ID) }>
										edit
									</a>
								}
							</p>
						</hgroup>
					</div>
					<div class="flex items-center justify-between my-4">
						<span class="text-sm text-gray-600 dark:text-gray-400 uppercase">
							{ props.Recipe.WhenToEat }
						</span>
					</div>
					<div class="flex justify-between items-center mb-4">
						<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2">
								<circle cx="12" cy="12" r="10"></circle>
								<polyline points="12 6 12 12 16 14"></polyline>
							</svg>
							<span>Preparation: </span>
							<span class="font-semibold ml-1">
								{ strconv.Itoa(int(props.Recipe.PrepTime)) }
								min
							</span>
						</p>
						<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2">
								<rect width="20" height="15" x="2" y="4" rx="2"></rect> <rect width="8" height="7" x="6" y="8" rx="1"></rect> <path d="M18 8v7"></path> <path d="M6 19v2"></path> <path d="M18 19v2"></path>
							</svg>
							<span>Cooking: </span>
							<span class="font-semibold ml-1">
								if props.Recipe.CookTime == 0 {
									-
								} else {
									{ strconv.Itoa(int(props.Recipe.CookTime)) } min
								}
							</span>
						</p>
					</div>
					<div class="flex justify-between items-center mb-4">
						<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2">
								<rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect> <line x1="16" x2="16" y1="2" y2="6"></line> <line x1="8" x2="8" y1="2" y2="6"></line> <line x1="3" x2="21" y1="10" y2="10"></line>
							</svg>
							Calories: 
							<span class="font-semibold ml-1">
								if props.Recipe.Calories == 0 {
									? 
								} else {
									{ strconv.Itoa(int(props.Recipe.Calories)) }
								}
								kcal
							</span>
						</p>
						<p class="text-sm text-gray-600 dark:text-gray-400 flex items-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2">
								<path d="M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z"></path>
								<line x1="6" x2="18" y1="17" y2="17"></line>
							</svg>
							Difficulty: <span class="font-semibold ml-1">Medium</span>
						</p>
					</div>
					<p class="text-sm text-gray-700 dark:text-gray-300 my-2 italic">
						{ props.Recipe.Description }
					</p>
				</div>
				<div>
					<hgroup>
						<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mt-0">Ingredients</h2>
						if props.Recipe.Servings != 0 {
							<span class="text-sm italic">{ "for" } { strconv.Itoa(int(props.Recipe.Servings)) }</span>
						}
					</hgroup>
					<ul class="list-disc list-inside text-sm text-gray-700 dark:text-gray-300 my-2">
						for _, dosing := range props.Ingredients {
							<li>{ dosing.Ingredient.Name } - { strconv.Itoa(int(dosing.Quantity)) } { string(dosing.Unit) }</li>
						}
					</ul>
				</div>
				<div class="md:col-span-2 space-y-2">
					<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mt-0">Instructions</h2>
					<p class="dark:text-gray-100">
						@Unsafe(string(markdown.Markdown(props.Recipe.Instructions)))
					</p>
				</div>
			</div>
			<aside class="w-full md:w-56">
				<h2
					class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4 mt-0"
					hx-get={ "/recipes/" + props.Recipe.ID + "/related" }
					hx-trigger="revealed"
					hx-target="#related-recipes"
				>
					Related Recipes
				</h2>
				<div id="related-recipes" class="flex flex-col gap-6">
					@RelatedRecipes(props.RelatedRecipes)
				</div>
			</aside>
		</div>
	}
}

templ RelatedRecipes(recipes []store.Recipe) {
	<div class="flex flex-col gap-6">
		for _, recipe:= range recipes {
			@components.Card(components.CardProps{
				Title:     recipe.Name,
				WhenToEat: recipe.WhenToEat,
				ImageURL:  recipe.ImageUrl,
				Body:      recipe.Description,
				Link:      "/recipes/" + recipe.ID,
			})
		}
	</div>
}
